<!--
 * @Description: 
 * @Author: yech
 * @Date: 2021-01-23 10:51:59
-->
<template>
    <div class="app">
        <VisualEditor
            v-model="jsonData"
            :config="visualConfig"
            :formData="formData"
            :customProps="customProps"
        >
            <!-- <template #subBtn>
                <el-button v-if="formData.food==='dangao'">自定义按钮</el-button>
                <el-tag v-else>自定义标签</el-tag>
            </template> -->
        </VisualEditor>
        <div style="text-align:center">
            {{ JSON.stringify(formData) }}
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { VisualEditor } from '@/packages/visual-editor';
import { visualConfig } from '@/visual.config';
import data from './data.json';
export default defineComponent({
    name: 'App',
    components: {
        VisualEditor
    },
    data() {
        return {
            visualConfig,
            jsonData: data,
            formData: {
                username: 'admin'
            },
            customProps: {
                subBtn: {
                    onClick: () => {
                        this.$notify({
                            message: '执行表单数据校验以及提交服务器'
                        });
                    }
                },
                mySelect: {
                    onChange: (val: string) => {
                        this.$notify({ message: `发生变化${val}` });
                    }
                }
            }
        };
    }
});
</script>

<style lang="scss">
html,
body {
    margin: 0;
    padding: 0;
}
.app {
    padding-bottom: 300px;
}
</style>
